<template>
  <div class="wrapper" v-if="zonesList">
    <el-table :data="zonesList" height="100px" v-adaptive>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="token" label="Token"> </el-table-column>
      <el-table-column prop="createdDate" label="创建日期">
        <template slot-scope="scope">
          {{ formatDateT(scope.row.createdDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="updatedDate" label="更新日期">
        <template slot-scope="scope">
          {{ formatDateT(scope.row.updatedDate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit-outline"
            @click="openEditMap(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-map
      :editMapShow="editMapShow"
      :editMapData="editMapData"
      @showEditMap="showEditMap"
      @editMapList="editMapList"
    />
  </div>
</template>

<script>
import EditMap from "./EditMap.vue";
import { delZones } from "@/api/zones";
export default {
  components: {
    EditMap,
  },
  props: {
    zonesList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      editMapShow: false,
      editMapData: {},
      tableHeight: 0,
    };
  },
  mounted() {},
  methods: {
    // 删除地图
    handleDelete(index, row) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delZones(row.token).then((res) => {
          this.$msg({
            type: "success",
            message: "删除成功!",
          });
          that.$emit("gteZoneList");
        });
      });
    },
    // 时间格式转换
    formatDateT(date) {
      if (date === undefined) {
        return "N/A";
      }
      return this.$moment(new Date(date)).format("YYYY-MM-DD H:mm:ss");
    },
    // 编辑地图
    openEditMap(index, row) {
      this.editMapData = row;
      this.editMapShow = true;
    },
    showEditMap(data) {
      if (data === "false") {
        this.editMapShow = false;
      } else {
        this.editMapShow = true;
      }
    },
    editMapList() {
      this.$emit("gteZoneList");
    },
  },
};
</script>
<style lang="less" scoped>
</style>
